<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg {
            background-color: burlywood;
        }
    </style>
</head>

<body>
    <button>1121</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <textarea name="" id="t2" cols="30" rows="10" class="m1"></textarea>
    <!-- <input type="text" name="" id="t1"> -->

</body>
<script>
    window.onload = () => {
        let but = document.getElementsByTagName("button");
        for (let i = 0; i < but.length; i++) {
            but[i].onclick = () => {
                let tb = document.getElementsByTagName("textarea");
                let m1 = document.getElementsByClassName("m1");
                for (let j = 0; j < but.length; j++) {
                    but[j].className = "";
                }
                but[i].className = "bg";
                // m1.innerHTML = but[i].html();
                // m1.innerHTML = but[i].text();
                // let ii = but[i].html();
                // m1.innerHTML = ii
                // m1.innerHTML = but[i].value();
                // console.log(but[i].value)
                // m1.innerHTML = "1";
                // tb.value = but[i].value;
                // t2.value = but[i].value;
                t2.value = but[i].innerHTML;
                // t1.value = but[i].value;
                // m1.text("1")

            }
        }
    }
</script>

</html>